<template>
  <el-form-item :class="attributes?.customClassName?.formItemClassName ?? ''" v-bind="attributes.formItem" v-if="!attributes.isHidden()">
      <template
          v-for="item in attributes?.formItem?.slotScope ?? []"
          :key="item.slotName"
          v-slot:[item.slotName]="scope">
          <component :is="item.render(scope)" />
      </template>
      <el-input
          ref="refInput"
          v-model="selectValue"
          :disabled="typeof (attributes.disabled) === 'function' ? attributes.disabled() : attributes.disabled"
          :class="attributes?.customClassName?.elModelClassName ?? ''"
          v-bind="attributes.elModel"


      >
          <template
                  v-for="item in attributes?.elModel?.slotScope ?? []"
                  :key="item.slotName"
                  v-slot:[item.slotName]="scope">
              <component :is="item.render(scope)" />
          </template>
        <template #prefix v-if="attributes?.prefixIcon">
            <img style="width:18px;height:18px;" :src="attributes?.prefixIcon" alt="">
        </template>
      </el-input>
  </el-form-item>
</template>

<script setup>
import {computed, nextTick, onMounted, ref} from 'vue'
const refInput = ref(null)
const props = defineProps({
    value: {
        type: [String, Number, Boolean, Date, Array],
        required: true
    },
    attributes: {
        type: Object,
    default: () => ({})
}
})
const emit = defineEmits(['push-val',"on-ref"])
const selectValue = computed({
    get() {
        return props.value
    },
    set(val) {
        emit('push-val', val)
    }
})
onMounted(() => {
    nextTick(()=>{
        emit('on-ref', refInput.value)
    })
})
</script>

<style scoped>
:deep(.el-input-group__prepend){
		background: #F3F3F3;
		box-shadow: none;
		border-top-left-radius: 44px;
		border-bottom-left-radius: 44px;
		line-height: 16px;
		padding-left: 16px;
		padding-right: 12px;
	}
</style>